<%@ include file="../common/IncludeTop.jsp"%>

<script>
	let xhr;
	function checkUsername(){
		let username = document.getElementById("username").value;
		if(username.trim()=="")
		{
			let msg = document.getElementById('usernameTips');
			msg.classList.remove('okmsg');
			msg.innerText = '';
		}
		else
		{
			xhr = new XMLHttpRequest();
			xhr.onreadystatechange = process;
			xhr.open("GET", "usernameExist?username="+username, true);
			xhr.send(null);
		}
	}
	function process(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				let responseInfo = xhr.responseText;
				let msg = document.getElementById('usernameTips');
				if(responseInfo == "Exist"){
					msg.classList.remove('okmsg');
					msg.classList.add('errormsg');
					msg.innerText = 'Not available';
				}else if(responseInfo == "Not Exist"){
					msg.classList.remove('errormsg');
					msg.classList.add('okmsg');
					msg.innerText = 'Available';
				}
			}
		}
	}
	function PSW(){
		let psw = document.getElementById("password").value.trim();
		let msg = document.getElementById('pswStrength');
		if(psw=="")
		{
			msg.className = 'errormsg';
			msg.innerText = "Please put in your password!";
		}
		else if(psw.search(/\d/)!=-1)
		{
			if(psw.search(/[a-z]/i)!=-1)
			{
				msg.className = 'okmsg';
				msg.innerText = "PasswordStrength: High";
			}
			else
			{
				msg.className = 'okmsg';
				msg.innerText = "PasswordStrength: Low";
			}
		}
	}

	function RPSW()
	{
		let psw = document.getElementById("password").value.trim();
		let rpsw = document.getElementById("repeatedPassword").value.trim();
		let msg = document.getElementById('rpsw');
		if(psw!==rpsw)
		{
			msg.className = 'errormsg';
			msg.innerText = "Two input password must be consistent";
		}
		else
		{
			msg.className = 'okmsg';
			msg.innerText = "Password OK";
		}
	}
</script>

${sessionScope.messageAccount}

<div id="Catalog">
	<form action="newAccount" method="post">
		<h3>User Information</h3>

		<table>
			<tr>
				<td>User ID:</td>
				<td><label>
					<input id="username" type="text" name="username" onblur="checkUsername();"/><br>
				<span id ="usernameTips"></span><br/>
				</label></td>
			</tr>
			<tr>
				<td>New password:</td>
				<td><label>
					<input id="password" type="text" name="password" onblur="PSW();"/><br>
				<span id = "pswStrength"></span><br/>
				</label></td>
			</tr>
			<tr>
				<td>Repeat password:</td>
				<td><label>
					<input id="repeatedPassword" type="text" name="repeatedPassword" onblur="RPSW();"/><br>
				<span id = "rpsw"></span><br/>
				</label></td>
			</tr>
			<tr>
				<td>VerificationCode:</td>
				<td>
					<input type="text" name="vCode" size="5" maxlength="4"/>
					<a href="newAccount"><img border="0" src="verificationCode" name="checkcode"></a>
				</td>
			</tr>
		</table>

		<%@ include file="IncludeAccountFields.jsp"%>
		<input type="submit" name="newAccount" value="Save Account Information" />
	</form>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>